<template>
	<view class="danganadd">
		<view class="userinfo">
		
			
			
			
			<view class="data_item">
				<view class="label">
					姓名
				</view>
				<view class="item_input">
					<input type="text" v-model="userData.name"  placeholder="请输入姓名" />
				</view>
				<view class="icon">
					<text></text>
				</view>
			</view>
			
			<view class="data_item">
				<view class="label">
					姓名
				</view>
				<view class="item_input">
					<input type="digit" v-model="userData.phone" @blur="checkPhone"  placeholder="请输入手机" />
				</view>
				<view class="icon">
					<text></text>
				</view>
			</view>
			
			
			
			<!-- <picker mode="region" :range="position" @change="positionChange"> -->
				
				<view class="data_item">
					<view class="label">
						省市县
					</view>
					<view class="item_input">
						<input type="text" v-model="ssx" disabled placeholder="请选择地区" />
					</view>
					<view class="icon" @click="getUserPosition">
						<text class="iconfont icondizhi"></text>
					</view>
				</view>
			<!-- </picker> -->
			
			<view class="data_item">
				<view class="label">
					详细地址
				</view>
				<view class="item_input">
					<input type="digit" v-model="userData.address"  placeholder="请输入具体地址" />
				</view>
			</view>
			
			<view class="data_item">
				<view class="label">
					设为默认
				</view>
				<view class="item_input">
					<radio-group name="gender" @change="genderChange">
						<label class="radiolabel">
							<view class="radioitem">
								<radio :value="1" /><text>是</text>
							</view>
							<view class="radioitem">
								<radio :value="2" /><text>否</text>
							</view>
						</label>
					</radio-group>
				</view>
			</view>

		</view>
		
		<view class="btn_box">
			<button type="primary" @click="SubData">确定</button>
			
			<button type="danger" v-if="userData._id" @click="deleteData(userData._id)">删除</button>
		</view>
	</view>
</template>

<script>
	import uniCombox from "@/components/uni-combox/uni-combox"
	export default {
	    components: {uniCombox},
		data() {
			return {
				userData: {
					name: "",
					phone: "",
					address: "",
					left: "",
					top: "",
					province: "",
					city: "",
					country: "",
					defaultAdd: "",
					
				},
				position: [],
				addid: "",
				
			}
		},
		onShow() {
			this.getLocation()
		},
		onLoad( e ) {
			console.log(e);
			if(e.type == "add") {
				this.userData = {
						name: "",
						phone: "",
						address: "",
						left: "",
						top: "",
						province: "",
						city: "",
						country: "",
						defaultAdd: "",
						
					}
				} else {
					uni.setNavigationBarTitle({
						title:"修改地址"
					})
					this.addid = e.type
					this.getMyAddress()
				}
			
		},
		computed:{
			token() {
				return this.$store.state.token
			},
			ssx() {
				return `${this.userData.province }${this.userData.city}${this.userData.country}`
			}
		},
		methods: {
			
			// 根据ID获取地址
			async getMyAddress() {
				if(this.addid) {
					let res = await this.$Request("/admin/getUserAddressByID",{id: this.addid}, this.token)
					console.log(res);
					let code = res.data.code 
					if(code == 200) {
						this.userData = res.data.data
						this.userData.addid = this.userData._id
					}
				}
			},
			
			// 获取定位权限
			getLocation() {
				let self = this 
				uni.getSetting({
					success( res ) {
						if(!res.authSetting["scope.userLocation"]) {
							uni.authorize({
								scope:"scope.userLocation",
								success( res ) {
									console.log("用户同意定位");
									// self.getUserPosition()
								},
								fail(err) {
									console.log("用户拒绝授权");
								}
							})
						}
					}
				})
			},
			
			// 定位省市县
			getUserPosition() {
				let self = this
				uni.getLocation({
					type: "gjc02",
					success( res ) {
						console.log(res);
						self.userData.left = res.latitude 
						self.userData.top = res.longitude
						uni.request({
							url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${self.userData.left},${self.userData.top}&key=${self.$apikey}`,
							data: {},
							success:( city ) => {
								  console.log(city);
								let info = city.data.result.address_component
								self.userData.province = info.province
								self.userData.city = info.city
								self.userData.country = info.district
							}
						})
					}
				})
			},
			
			// 是否默认
			genderChange(e) {
				this.userData.defaultAdd = e.detail.value
			},
			
			//  检查数据
			 checkData() {
				 let { name, phone, province, city, country, left, top, address } = this.userData
				 if(!name) {
					 uni.showToast({
					 	title: "请输入姓名",
						icon:"loading"
					 })
					 return false
				 } else if(!phone) {
					 uni.showToast({
					 	title: "请输入手机",
						icon:"loading"
					 })
					 return false
				 } else if(!province) {
					 uni.showToast({
					 	title: "请选择地区",
						icon:"loading"
					 })
					 return false
				 } else if(!address) {
					 uni.showToast({
					 	title: "请输入地址",
						icon:"loading"
					 })
					 return false
				 } else {
					 return true
				 }
			 },
			
			//  添加地址
			async SubData() {
				let isReady = this.checkData()
				console.log(this.userData);
				if(isReady) {
					let res = await this.$Request("/admin/addUserAddress", this.userData, this.token)
					console.log(res);
					let code = res.data.code 
					if(code == 204) {
						uni.showToast({
							title: "添加成功",
							icon: "success",
							duration: 2000,
							
						})
						
						setTimeout(() => {
							uni.navigateTo({
								url:"/pages/address/address"
							})
						}, 1000)
					}
				}
			},
			
			// 隐藏地址
			deleteData(id) {
				// console.log(id);
				let self = this
				uni.showModal({
					showCancel:true,
					cancelText:"否",
					confirmText:"是",
					cancelColor:"#FF0000",
					confirmColor:"#007AFF",
					title: "提示",
					content: "确定删除地址?",
					async success( res ) {
						if(!res.cancel) {
							let res = await self.$Request("/admin/changeStatusAddressByID", { id }, self.token)
							let code = res.data.code 
							if(code == 204) {
								uni.showToast({
									title:"删除成功",
									icon: "success",
									duration:2000
								})
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/address/address"
									})
								}, 1000)
							}
						}
					}
				})
				
			},
			
			// 检测手机号码
			checkPhone() {
				// console.log(this.userData.phone);
				let reg = /^1[3456789]\d{9}$/
				let isPhone = reg.test(this.userData.phone)
				if(!isPhone) {
					uni.showToast({
						title: "号码格式不正确",
						icon:"loading"
					})
					this.userData.phone = ""
				}
			},
		},	
	}
</script>

<style scoped lang="scss">
	.danganadd {
		width: 100%;
		box-sizing: border-box;
		.userinfo {
			width: 100%;
			.data_item {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;
				margin: 10rpx 0;
				font-size: 34rpx;
				.label {
					width: 200rpx;
					padding-left: 20rpx;
				}
				.item_input {
					text-align: right;
					width: 530rpx;
					.radiolabel {
						width: 100%;
						display: flex;
						justify-content: space-around;
					}
				}
				.icon {
					width: 60rpx;
					color: #999999;
					padding-left: 20rpx;
				}
			}
		}
		.title {
			width: 100%;
			background-color: #aaa;
			line-height: 60rpx;
			height: 60rpx;
			color: #f2f2f2;
			padding-left: 30rpx;
			font-size: 24rpx;
		}
		.binglist {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			.itembox {
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.item {
					padding: 15rpx;
					background-color: #f2f2f2;
					border-radius: 30rpx;
					font-size: 20rpx;
					margin: 10rpx;
				}
				.active {
					background-color: green;
					color: #fff;
				}
			}
		}
		.btn_box {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			padding: 20rpx 0;
			button {
				width: 600rpx;
				font-size: 26rpx;
				border-radius: 60rpx;
				margin: 20rpx auto;
			}
		}
	}
</style>
